import React,{ useEffect, useState } from 'react'
import Taro, { useDidShow } from '@tarojs/taro'
import { AtProgress,AtModal } from 'taro-ui'
import { View, Image, Text } from '@tarojs/components'
import "taro-ui/dist/style/components/modal.scss";
import "taro-ui/dist/style/components/progress.scss";
import './index.less'

export default function MemberCenter(props) {
  const [PopupSpecs,setPopupSpecs] = useState(false)
  const [userinfo,setUserInfo] = useState({})
  const [userMember,setUserMember] = useState({})
  useDidShow(()=>{
    setUserInfo(Taro.getStorageSync('user') || {})
    Taro.$get('/wallet/user/member/value?businessType=CINEMA').then(res=>{
      setUserMember(res.content)
    })
  })
  return (
    <View className="member-center">
      <View className="center-header">
        <Image className="header-img" src={userinfo.avatar} mode="aspectFill"></Image>
        <View className="header-item">
          <View className="item-h2">{userMember.growValue || 0}</View> 成长值
        </View>
        {/* <View className="header-line"></View>
        <View className="header-item" onClick={()=>{
          Taro.navigateTo({
            url:'/pages/mine/mine-integral/index'
          })
        }}>
          <View className="item-h2">{userMember.growIntegral || 0}</View> 积分
        </View> */}
      </View>
      <View className="center-vip">
        <View className="vip-header">
          <Image src={require('@/images/mine/duotone.svg')} className='header-img'></Image>
          <View className="h2">{userMember.memberName}</View>
        </View>
        {userMember.isMember == 0?<>
        <View className="vip-process">
          <AtProgress percent={(userMember.growValue/userMember.nextGrowValue)*100} strokeWidth={4} isHidePercent color="#E2B46F" />
        </View>
        <View className="box-flex" style={{justifyContent:'space-between'}}>
          <View className="vip-span">{userMember.growValue}/{userMember.nextGrowValue}</View>
          <View className="vip-span">{userMember.equityCountDesc}</View>
        </View>
        </>:<View className="vip-span">{userMember.memberDateStr} <Image onClick={()=>{setPopupSpecs(true)}} src={require('@/images/info-remind.svg')}></Image></View>}
      </View>
      <AtModal isOpened={PopupSpecs} onClose={()=>{setPopupSpecs(false)}}>
        <View className="popup-specs">
          <View className="specs-box">
            <View className="specs-header">
              <View className='h2'>{userMember.memberName}</View>
              <Image src={require('@/images/event-rules_2x.png')} className="header-img"></Image>
            </View>
            <View className="specs-main">
              <View>{userMember.memberDateStr} 当前等级将到期，届时将根据你的成长值重新评估新会员等级。</View>
              更新等级后成长值将清零，重新开始计算。
            </View>
            <View className="specs-button" onClick={()=>{setPopupSpecs(false)}}>我知道了</View>
          </View>
        </View>
      </AtModal>

      <View className="center-main">
        <View className="center-title">我的权益 <Text>({userMember.equityList?.length})</Text></View>
        <View className="main-list">
          {userMember.equityList?.map(res=>{
            return <View className="list-item" key={res.id}>
            <View className="item-info">
              <View className="info-h2">{res.equityName}</View>
              <View className="info-p">{res.equityIntroduction}</View>
            </View>
            <View className="item-img"><Image src={require('@/images/mine/duotone.svg')}></Image></View>
          </View>
          })}
        </View>
      </View>
    </View>
  )
}